<template>

  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
 	<div class="news" v-if="!isfull">
 	<ul>
    <li v-for="(item,index) in ListData" :key="index" >
      <img src="../../assets/images/501.png" width="40" height="40px" />

      <a href="#" v-if="item.read_status==0" @click="goNewsList(item.id,item.read_status)" style="color:red">
        服务提醒<p>{{item.title}}{{item.read_status}}</p>
      </a>

      <a href="#" v-else @click="goNewsList(item.id,item.read_status)">
        服务提醒<p>{{item.title}}{{item.read_status}}</p>
      </a>
      <span style="float:right; font-size: 12px">{{item.created_at}}</span>
    </li>
  </ul>
 	</div>
  </van-list>

</template>
<script>
import { getMessageList,getMessageInfo } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      searchList: {
        total: 0,
        pageno: 0,
        pagesize:10,
      },
      loading: false,
      finished: false,
      isfull:true,
      ListData: [],
      firstLoad:true,  //第一次加载
    };
  },
  computed: {},
  methods: {
    goNewsList(id,status) {  //设为已读
      console.log(status)
      if(status==0){
        getMessageInfo({id:id}).then(res => {
        });
      }
    },
    onLoad(){
      setTimeout(() => {
        console.log("000000000")
        if(this.firstLoad==false ){
          console.log("false")
          console.log(this.searchList.total)
          console.log(this.searchList.pagesize)
          console.log(this.searchList.pageno)
          if(this.searchList.total <= this.searchList.pagesize*(this.searchList.pageno-1)){
            console.log("return")
            return;
          }
        }
        getMessageList(this.searchList).then(res => {
          console.log("getMessageList2")
          // console.log(res.data)
          this.searchList.total = res.data.count;

          if (this.searchList.total > 0) {
            this.isfull = false;
          }
          if(this.searchList.total <= this.searchList.pagesize*this.searchList.pageno){
            this.finished = true;
          }
          for (let i = 0; i < res.data.list.length; i++) {
            // console.log(res.data.list[i]);
            this.ListData.push(res.data.list[i]);
          }
          console.log(this.ListData)
          this.firstLoad = false
          this.loading = false;
        });
      }, 1000);

      this.searchList.pageno= this.searchList.pageno+1;
    },
  },
  created(){
  }
};
</script>
<style lang="scss">
.news{
 	width:100%; 
    height:100%; 
    background:#fff;
    span{
 	font-size:16px;
 	font-weight:bold;
 	padding-left:18px;
 	}
 	ul{
 	list-style:none;
     /*hr{ */
 	    /*border:1px solid #f8f8f8;*/
     /*}*/
     li{
        height:80px;
        overflow:hidden;
        padding:10px;
        border-bottom:1px solid #f8f8f8;
       &:first-child {
         border-bottom:0px solid #f8f8f8;
       }
       &:last-child {
         border-bottom:0px solid #f8f8f8;
       }
       img{
        float:left;
        margin-right:10px;
        }
         /*span{*/
        /*font-size:12px;*/
         /*font-weight:400;*/
         /*color:#999;*/
         /*line-height:32px;*/
         /*}*/

         a{
            color: #333333;
            text-decoration:none;
            font-size:16px;
            font-weight:400;
            line-height:22px;
            width:80%;
            float:left;
           p{
            color:#666;
              font-size:14px;
              font-weight:300;
            }
        }
      }
 	}
 	
     }
</style>







